<template>
  <div>
    <Title :title="title" :gotoRoute="gotoRoute"></Title>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm "
             style="margin-top: 5px">
      <el-form-item label="转出账号:" prop="region">
        <el-select v-model="ruleForm.TransferAccount" placeholder="请选择转出账号">
          <el-option label="622837001111111" value="6228 3700 1111 1111"></el-option>
          <el-option label="622837001111112" value="6228 3700 1111 1112"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款户名:" prop="CollectionName" class="item ">
        <el-input v-model="ruleForm.CollectionName" placeholder="请输入收款户名"></el-input>
      </el-form-item>
      <el-form-item label="收款账号:" prop="CollectionAccount" class="item ">
        <el-input v-model="ruleForm.CollectionAccount" placeholder="请输入收款账号"></el-input>
      </el-form-item>
      <el-form-item label="收款银行:" prop="CollectionBank" class="item ">
        <el-input v-model="ruleForm.CollectionBank" placeholder="请输入收款银行"></el-input>
      </el-form-item>
      <el-form-item label="汇款金额:" prop="RemittanceAmount" class="item ">
        <el-input v-model="ruleForm.RemittanceAmount" placeholder="请输入汇款金额"></el-input>
      </el-form-item>
      <el-form-item label="收款附言:" prop="CollectionStatement" class="item ">
        <el-input v-model="ruleForm.CollectionStatement" placeholder="请输入收款附言"></el-input>
      </el-form-item>
      <el-row v-if="!isSend" style="text-align: center">
        <el-button class="button" type="primary" disabled>下一步</el-button>
      </el-row>
      <el-row v-if="isSend" style="text-align: center;">
        <router-link to="/TransferConfirm">
          <el-button class="button" type="primary" @click="submitForm('ruleForm')">下一步</el-button>
        </router-link>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '../components/title'

export default {
  components: {
    Title
  },
  data () {
    return {
      title: '转账录入页',
      gotoRoute: '/',
      // isSend: false,
      ruleForm: {
        TransferAccount: '',
        CollectionName: '',
        CollectionAccount: '',
        CollectionBank: '',
        RemittanceAmount: '',
        CollectionStatement: ''
      },
      rules: {
        TransferAccount: [
          {required: true, message: '请选择转出账号', trigger: 'blur'}
        ],
        CollectionName: [
          {required: true, message: '请输入收款户名', trigger: 'blur'}
        ],
        CollectionAccount: [
          {required: true, message: '请输入收款账号', trigger: 'blur'}
        ],
        CollectionBank: [
          {required: true, message: '请输入收款银行', trigger: 'blur'}
        ],
        RemittanceAmount: [
          {required: true, message: '请输入汇款金额', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    isSend () {
      var isSend = false
      if (this.ruleForm.TransferAccount !== '' && this.ruleForm.CollectionName !== '' && this.ruleForm.CollectionAccount !== '' && this.ruleForm.CollectionBank !== '' && this.ruleForm.RemittanceAmount !== '') {
        isSend = true
      }
      return isSend
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('填写完成')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      var TransferAccount = this.ruleForm.TransferAccount
      var CollectionName = this.ruleForm.CollectionName
      var CollectionAccount = this.ruleForm.CollectionAccount
      var CollectionBank = this.ruleForm.CollectionBank
      var RemittanceAmount = this.ruleForm.RemittanceAmount
      var CollectionStatement = this.ruleForm.CollectionStatement
      this.$store.commit('sendTransferAccount', TransferAccount)
      this.$store.commit('sendCollectionName', CollectionName)
      this.$store.commit('sendCollectionAccount', CollectionAccount)
      this.$store.commit('sendCollectionBank', CollectionBank)
      this.$store.commit('sendRemittanceAmount', RemittanceAmount)
      this.$store.commit('sendCollectionStatement', CollectionStatement)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover
    width 300px
  .el-button--primary
    width 300px
</style>
